<!-- Sidebar.vue -->
<script lang="ts" setup>
import CreateAgentModal from '@/components/CreateAgentModal/index.vue';
import { AppstoreOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// import logo0 from '@/assets/142.png';
// import logo4 from '@/assets/5959.png';
// import award from '@/assets/if-award.svg';
// import logo1 from '@/assets/side1.png';
// import logo3 from '@/assets/side3.png';
import { getIcon } from "@/api/assets/assets";

const logo0 = ref<string | null>(null);
const logo1 = ref<string | null>(null);
const logo3 = ref<string | null>(null);
const logo4 = ref<string | null>(null);
const award = ref<string | null>(null);

const fetchIcon = async () => {
  try {
    const data = await getIcon(['142.png', '5959.png', 'if-award.svg', 'side1.png', 'side3.png']);
    logo0.value = data['142.png'];
    logo1.value = data['side1.png'];
    logo3.value = data['side3.png'];
    logo4.value = data['5959.png'];
    award.value = data['if-award.svg'];
  }
  catch (error) {
    console.error('API 调用错误:', error);
  }
};

const router = useRouter();
const route = useRoute();

// 计算当前选中的菜单项
const selectedKeys = computed(() => [route.path]);

// 路由导航处理
const handleClick = (e: { key: string }) => {
  if (e.key !== route.path)
    router.push(e.key);
};

// 引用拟态框组件
const modalRef = ref<InstanceType<typeof CreateAgentModal> | null>(null);

// 显示拟态框的方法
const showModal = () => {
  if (modalRef.value && modalRef.value.showAgentModal)
    modalRef.value.showAgentModal();
};

// 菜单项样式
const menuItemStyle = {
  marginBottom: '0.9375rem',
  fontSize: '1.25rem',
  borderLeft: '0.125rem solid #d9d9d9',
  borderRadius: 0,
  marginLeft: '2.125rem',
  width: '15.67rem',
};

const getItemStyle = (key: string, isSubMenuItem = false) => {
  if (selectedKeys.value.includes(key) && isSubMenuItem) {
    return {
      ...menuItemStyle,
      borderLeft: '0.25rem solid #1890ff',
      backgroundColor: '#f0f5ff',
    };
  }
  return menuItemStyle;
};

const handleChat = () => {
  const chatUrl = import.meta.env.VITE_ILINKCHAT_URL;
  window.open(chatUrl, '_blank');
};

onMounted(() => {
  fetchIcon();
});
</script>

<template>
  <div class="sidebar-container">
    <a-layout-sider width="17.8125rem" class="sidebar">
      <!-- 创建应用和开始对话按钮 -->
      <div class="create-button-container">
        <a-button
          type="primary"
          class="gradient-button"
          style="width: 8.25rem; margin-right: 0.5rem; cursor: pointer;"
          @click="showModal"
        >
          <PlusOutlined />
          创建应用
        </a-button>
        <a-button
          type="primary"
          class="gradient-button"
          style="width: 8.25rem; cursor: pointer;"
          @click="handleChat"
        >
          <PlusOutlined />
          开始对话
        </a-button>
      </div>

      <!-- Ant Design Vue Menu Component -->
      <a-menu mode="inline" :selected-keys="selectedKeys" @click="handleClick">
        <a-menu-item
          key="/user/homepagesquare"
          style="margin-bottom: 0.9375rem; font-size: 1.2rem; vertical-align: middle;"
        >
          <img :src="logo0 ? logo0 : ''" alt="首页" class="menu-icon">
          首页
        </a-menu-item>
        <a-menu-item key="/user/training" style="margin-bottom: 0.9375rem; font-size: 1.2rem; vertical-align: middle;">
          <img :src="award ? award : ''" alt="“玩转智能体”大赛" class="menu-icon">
          “AI+X”训练营
        </a-menu-item>

        <a-sub-menu key="/user/dachuang" style="margin-bottom: 0.9375rem">
          <template #title>
            <span style="font-size: 1.2rem;">双创广场</span>
          </template>
          <template #icon>
            <img
              :src="logo1 ? logo1 : ''"
              alt="双创广场"
              style="width: 1.2rem; height: 1.2rem; margin-right: 0.45rem; cursor: pointer;"
            >
          </template>
          <a-menu-item key="/user/dachuang" style="width: 14.75rem;" :style="getItemStyle('/dachuang', true)">
            项目展示
          </a-menu-item>
          <a-menu-item
            key="/user/dachuang/saishi" style="width: 14.75rem;"
            :style="getItemStyle('/dachuang/saishi', true)"
          >
            赛事信息
          </a-menu-item>
        </a-sub-menu>

        <!-- Uncomment if needed
        <a-menu-item key="/moxing" style="margin-bottom: 0.9375rem; font-size: 1.2rem;">
          <img :src="logo2" alt="模型广场" class="menu-icon">
          模型广场
        </a-menu-item>
        -->

        <a-menu-item key="/user/model" style="margin-bottom: 0.9375rem; font-size: 1.2rem;">
          <img :src="logo3 ? logo3 : ''" alt="数据广场" class="menu-icon">
          模型广场
        </a-menu-item>
        <a-menu-item key="/user/shuju" style="margin-bottom: 0.9375rem; font-size: 1.2rem;">
          <img :src="logo3 ? logo3 : ''" alt="数据广场" class="menu-icon">
          数据广场
        </a-menu-item>

        <a-menu-item key="/user/application" style="margin-bottom: 0.9375rem; font-size: 1.2rem;">
          <template #icon>
            <AppstoreOutlined style="font-size: 1.25rem; margin-right: 0.35rem;" />
          </template>
          应用广场
        </a-menu-item>

        <a-menu-item key="/user/skill" style="margin-bottom: 0.9375rem; font-size: 1.2rem;">
          <img :src="logo4 ? logo4 : ''" alt="学习广场" class="menu-icon">
          学习广场
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 引用拟态框组件 -->
    <CreateAgentModal ref="modalRef" />
  </div>
</template>

<style lang="scss" scoped>
.sidebar-container {
  display: flex;
}

.sidebar {
  border-right: 0.0625rem solid #cdc8c8;
  height: auto;
  background-color: #ffffff;

  .create-button-container {
    display: flex;
    justify-content: center;
    padding: 1rem;
  }

  .gradient-button {
    background: linear-gradient(90deg, #106feb, #7cc7f9);
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    height: 3.125rem;
    width: 100%;
    text-align: center;
    margin-bottom: 0.625rem;

    &:hover {
      background: linear-gradient(90deg, #3a8bff, #58b0ff);
    }

    .anticon {
      margin-right: 0.5rem;
    }
  }

  .menu-icon {
    width: 1.2rem;
    height: 1.3rem;
    margin-right: 0.625rem;
    vertical-align: middle;
  }

  .ant-menu-item {
    padding-left: 1.5rem !important;
    color: #4f4f4f;
  }

  .ant-menu-item:hover {
    color: #4f4f4f;
  }

  .ant-menu-item-selected {
    background-color: #f3f5f8 !important;
    color: #000 !important;
  }

  .ant-menu-submenu-title {
    padding-left: 1.5rem !important;
    color: #4f4f4f;
  }

  .ant-menu-submenu-title:hover {
    color: #4f4f4f;
  }

  .ant-menu-submenu-arrow {
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
